<template>
  <div class="home">
    <div class="relative w-full home-top px-32 pt-20 pb-80 box-border">
      <div class="flex top_logo items-center h-80">
        <div class="" style="display: flex; align-items: center">
          <img
            class="w-240 h-72"
            :src="require('@/assets/logo_copy.png')"
            alt=""
          />
          <!-- <h1 class="font-600 font-40 home-text-black ml-20">{{ TITLE }}</h1> -->
        </div>
        <div class="rg_top">
          <img
            :src="require('@/assets/ting.png')"
            alt=""
            @click="toPath('/customerSelect')"
          />
          <img
            :src="require('@/assets/shezhi.png')"
            @click="toPath('/language')"
          />
        </div>
      </div>
      <div class="flex justify-between mt-30 user_box">
        <div class="one_top">
          <p class="flex items-center">
            <span
              style="
                font-size: 18px;
                font-family: Manrope, Manrope;
                font-weight: 700;
                color: #000000;
              "
              class="color-9F9"
              >{{ $t("资产") }}</span
            >
            <img
              @click="isShowBalance = !isShowBalance"
              class="relative top-2 w-38 h-38 ml-14"
              :src="require('@/assets/image/home/open.png')"
              alt=""
            />
          </p>
          <div class="mt-22 moneys font-500 font-64 price home-text-black">
            <template v-if="isShowBalance">
              <span v-if="funds.total"
                >{{ (funds.total * 1).toLocaleString() }} $</span
              >
              <span v-else>$ 0.00</span>
            </template>
            <template v-else>
              <span>********</span>
            </template>
          </div>
          <div class="three" @click="toPath('/recharge/rechargeList')">
            <img :src="require('@/assets/xiazai.png')" alt="" />
            Deposit
          </div>
        </div>
        <div class="homeInfo">
          <img
            style="width: 40px; height: 40px"
            :src="require('@/assets/user.png')"
            alt=""
          />
          <div class="detail_u">
            <img :src="require('@/assets/shangsheng.png')" alt="" />
            +2.5%
          </div>
          <div class="three" @click="toPath('/withdraw/withdrawPage')">
            <img :src="require('@/assets/shangchuan.png')" alt="" />
            Withdraw
          </div>
        </div>
      </div>
      <div class="function">
        <div class="item" @click="toPath('/exchange/exchangePage')">
          <img :src="require('@/assets/sd.png')" alt="" />
          {{ $t("闪兑") }}
        </div>
        <div class="item" @click="toPath('/accountChange')">
          <img :src="require('@/assets/jyjl.png')" alt="" />
          {{ $t("账变记录") }}
        </div>
        <div class="item" @click="toPath('/promote')">
          <img :src="require('@/assets/yqfl.png')" alt="" />
          {{ $t("邀请返佣") }}
        </div>
      </div>
      <div class="count">
        <div class="port">
          <div class="demo" v-for="(item, index) in qList" :key="index">
            <div class="title">
              <div class="lf">
                <img
                  :src="
                    item.symbol
                      ? `${HOST_URL}/symbol/${item.symbol}.png`
                      : require('@/assets/loading-default.png')
                  "
                  class="w-72 h-72 rounded-full mr-30"
                />
                <span> {{ (item.name && item.name) || "--" }}</span>
              </div>
            </div>
            <div class="content">
              <div class="lf">
                <div class="name">Portofolio</div>
                <div class="money">
                  {{ currency.currency_symbol
                  }}{{
                    (item.close && (item.close * currency.rate).toFixed(2)) ||
                    "--"
                  }}
                </div>
              </div>
              <div class="rg">
                <m-echarts
                  :ratio="item.change_ratio"
                  :dataObj="item"
                  class="w-full h-full"
                />
                <Copy
                  v-if="isCopy"
                  :dataObj="item"
                  class="w-full h-full"
                ></Copy>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="absolute left-32 bottom w-764 flex justify-between items-center h-140 px-40 font-32 font-400 text-white border-ra-20 box-border"
        @click="$router.push({ path: '/machine' })"
        style="
          background: #fff;
          color: #000;
          border-radius: 18px 18px 18px 18px;
          border: 2px solid #f0f0f0;
        "
      >
        <div>{{ $t("AI智能矿池入口") }}</div>
        <div class="relative top-2">
          <img
            class="w-220"
            :src="require('@/assets/image/home/Frame3472.png')"
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- <div class="px-32 pt-108">
      <ioe-swiper></ioe-swiper>
    </div> -->

    <div class="px-32 bg-white" style="margin-top: 50px">
      <!-- <div class="border-ra-30 overflow-hidden" style="background: #FEFB58">
        <div class="flex justify-between pt-24 px-32 pb-18">
          <div>
            <p class="font-700 font-52">Earn with your crypto</p>
            <div class="flex items-center justify-center w-140 h-54 mt-50 up-to font-24">Up to 17%</div>
          </div>
          <div>
            <img class="w-394" :src="require('@/assets/image/home/image294.png')" alt="">
          </div>
        </div>
        <div class="flex justify-between p-32 border-ra-30-2"
             style="background: linear-gradient(90deg, #FFFF54 0%, #A112B8 100%);">
          <p class="w-452 font-24 font-400">Make crypto wort for you with a safe, high-yield savings accounts</p>
          <div  class="flex justify-center items-center w-160 h-72 font-28 font-500 bg-white text-black border-ra-20">
            Show
          </div>
        </div>
      </div> -->
      <div>
        <h2 class="my-40 font-500 font-44">{{ $t("市场") }}</h2>
        <div
          class="flex justify-between items-center h-72 font-600 font-28 text-grey text-center border-ra-20"
          style="background: #f8f8fa"
        >
          <span class="w-180" style="color: #121212">{{ $t("币种") }}</span>
          <span class="w-180">{{ $t("周走势") }}</span>
          <span class="w-180">{{ $t("价格") }}</span>
        </div>
      </div>
    </div>
    <!--    <list-quatation :listData="qList" />-->
    <market-list class="mt-20" :list-data="qList" />
    <div class="addBox" v-show="showSave" @click="closeSaveBox">
      <div class="add">
        <div class="font-26">
          <div class="flex flex-col">
            <b>{{ $t("安装此应用程序") }}:</b>
            <div class="mt-10">
              {{ $t("按") }}“<img
                style="width: 22px; vertical-align: middle; margin: 0 2px"
                :src="require(`../assets/theme/${THEME}/image/press.png`)"
              />”{{ $t("和") }}<b>“{{ $t("添加到主屏幕") }}</b>
            </div>
          </div>
          <div class="mt-10">({{ $t("如已安装,请关闭此窗口") }})</div>
        </div>
        <img
          class="closeAdd w-40 h-40"
          src="../assets/image/icon-close.png"
          alt=""
        />
        <div class="jiao"></div>
      </div>
    </div>
    <van-popup
      v-model="item.showPopUp"
      style="border-radius: 10px"
      :close-on-click-overlay="false"
      v-for="item in popupNewsList"
      :key="item.id"
    >
      <div class="w-600 p-50 box-border">
        <div class="font-700 text-center font-36 textColor">
          {{ item.title }}
        </div>
        <div class="flex justify-center mt-30" v-if="item.imgUrl">
          <img
            :src="`${BASE_URL}public/showimg!showImg.action?imagePath=${item.imgUrl}`"
            class="w-200 h-200"
            alt=""
          />
        </div>
        <div class="py-36 textColor" v-html="item.content"></div>
        <van-button
          color="#1D91FF"
          class="w-full h-80 rounded-full"
          type="info"
          @click="closePopNotice(item)"
        >
          {{ $t("我知道了") }}
        </van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import MEcharts from "@/components/market-list/MEcharts";
import Copy from "@/components/market-list/MEcharts/copy";
//import ListQuatation from "@/components/list-quotation";
import { Popup, Swipe, SwipeItem, Dialog } from "vant";
import MarketList from "@/components/market-list/MarketList";
import ioeSwiper from "@/components/ioe-swiper";
import { mapGetters, mapActions } from "vuex";
import { TIME_OUT } from "@/config";
import { SET_COIN_LIST } from "@/store/const.store";
import { _getHomeList } from "@/API/home.api";
import Axios from "@/API/userCenter";
import { THEME } from "@/config/theme";
import { setStorage, getStorage } from "@/utils/utis";
import { BASE_URL } from "@/config";
import AxiosApi from "@/API/assets";
import { _getUnreadMsg } from "@/API/im.api";

//import MEcharts from "@/components/market-list/MEcharts";

export default {
  name: "HomePage",
  components: {
    MEcharts,
    Copy,
    MarketList,
    ioeSwiper,
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Dialog.name]: Dialog,
    //MEcharts,
  },
  // async created() {
  //   // this.init();
  //   // this.checkingMesk();
  //   // this.connectWallet()
  //   // await this.fetchQList()
  // },
  computed: {
    ...mapGetters({
      coinList: "home/coinList",
      currency: "home/currency",
      coinArr: "home/coinArr",
      hotArr: "home/hotArr",
      userInfo: "user/userInfo",
    }),
  },
  data() {
    const arr = []; // 初始化数据
    for (let i = 0; i < 10; i++) {
      arr.push({ id: i });
    }
    return {
      BASE_URL,
      isShowBalance: true,
      THEME,
      account: "",
      hList: arr.slice(0, 3), // 热门
      qList: arr, // 行情列表
      active: 0,
      timeout: null,
      loading: true,
      announceTitle: "",
      announceId: "",
      announceList: [],
      socket: null,
      showSave: false,
      tabBar: [
        {
          img: require("@/assets/image/home/Top-up.png"),
          title: this.$t("加值"),
          path: "/recharge/rechargeList",
        },
        {
          img: require("@/assets/image/home/withdraw.png"),
          title: this.$t("提现"),
          path: "/withdraw/withdrawPage",
        },
        {
          img: require("@/assets/image/home/custom.png"),
          title: this.$t("在线客服"),
          path: "/customerSelect",
        },
        {
          img: require("@/assets/image/home/auth.png"),
          title: this.$t("公证认证"),
          path: "/certificationCenter",
        },
        {
          img: require("@/assets/image/home/Exchange.png"),
          title: this.$t("闪兑"),
          path: "/exchange/exchangePage",
        },
        {
          img: require("@/assets/image/home/record.png"),
          title: this.$t("账变记录"),
          path: "/accountChange",
        },
        {
          img: require("@/assets/image/home/language.png"),
          title: this.$t("语言切换"),
          path: "/language",
        },
        {
          img: require("@/assets/image/home/Send.png"),
          title: this.$t("邀请返佣"),
          path: "/promote",
        },
      ],
      popupNewsList: [],
      funds: {},
      unreadMsg_timer: null,
      unreadMsg_num: "",
    };
  },
  methods: {
    ...mapActions("home", [SET_COIN_LIST]),
    fetchUnread() {
      // 获取未读
      _getUnreadMsg().then((unread_num) => {
        this.unreadMsg_num = unread_num * 1 > 0 ? unread_num * 1 : "";
        //console.log('\n *** \n'+unread_num*1+'\n *** \n')
      });
    },
    async fetchQList() {
      // 获取行情
      const list = await _getHomeList(this.coinArr.join(",")).catch(() => {
        this.timeout = setTimeout(() => {
          this.fetchQList();
        }, 1000);
      });
      if (!(list instanceof Array)) {
        return;
      }
      this.loading = false;
      // this.qList = list.slice(0,10);
      this.qList = list;
      this.hList = list.filter((item) => this.hotArr.includes(item.symbol));
      if (this.hList.length == 4) {
        this.hList.pop();
      }
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(async () => {
        await this.fetchQList();
      }, TIME_OUT);
    },
    getNews() {
      Axios._getNewsList1({
        language: this.$i18n.locale,
      }).then((res) => {
        this.announceList = res.data;
      });
    },
    getPopupNews() {
      Axios._getPopupNews({
        token: this.userInfo.token,
        language: this.$i18n.locale,
      }).then((res) => {
        if (res.data.length) {
          if (!getStorage("popNotice")) {
            let list = res.data;
            list.forEach((item) => {
              item.showPopUp = true;
            });
            this.popupNewsList = list;
          }
        }
      });
    },
    closePopNotice(item) {
      item.showPopUp = false;
      setStorage("popNotice", true);
    },
    toAnnounceDetail(announceId) {
      if (announceId) {
        this.$router.push({
          name: "AnnounceDetail",
          query: { id: announceId },
        });
      }
    },
    getIsSave() {
      var issafariBrowser =
        /Safari/.test(navigator.userAgent) &&
        !/Chrome/.test(navigator.userAgent);
      if (issafariBrowser) {
        if (getStorage(`${this.TITLE}addtoClosed`)) {
          this.showSave = false;
        } else {
          this.showSave = true;
        }
      } else {
        this.showSave = false;
      }
      var isFull = window.navigator.standalone;
      if (isFull) {
        this.showSave = false;
      }
    },
    closeSaveBox() {
      setStorage(`${this.TITLE}addtoClosed`, 1);
      this.showSave = false;
    },
    getAssets() {
      AxiosApi.GetAllAssets().then((res) => {
        const { code, data } = res;
        if (code) {
          this.funds = data;
        }
      });
    },
    toPath(path) {
      if (path == "/withdraw/withdrawPage") {
        if (this.funds.status == 2) {
          this.$router.push({
            path: "/withdraw/withdrawPage",
          });
        } else {
          Dialog.confirm({
            confirmButtonText: this.$t("确定"),
            cancelButtonText: this.$t("取消"),
            title: this.$t("提示"),
            message: this.$t("请进行身份KYC认证"),
            beforeClose: (action, done) => {
              if (action === "confirm") {
                done();
                this.$router.push({
                  path: "/authentication",
                });
              } else {
                done();
              }
            },
          });
        }
      } else {
        this.$router.push(path);
      }
    },
    onClickLeft() {},
    onClickRight() {},
    startTimeout() {
      this.clearTimeout();
      this.fetchQList();
    },
    clearTimeout() {
      if (this.timeout) {
        clearTimeout(this.timeout);
        this.timeout = null;
      }
    },
    handlerClick() {
      console.log(23);
    },
  },
  async created() {
    this.getIsSave();
    this.getNews();
    this.getPopupNews();
    await this.SET_COIN_LIST();
    this.startTimeout();
    if (this.userInfo.token) {
      this.getAssets();
    }
  },
  async activated() {
    this.tabBar = [
      {
        img: require("@/assets/image/home/Top-up.png"),
        title: this.$t("加值"),
        path: "/recharge/rechargeList",
      },
      {
        img: require("@/assets/image/home/withdraw.png"),
        title: this.$t("提现"),
        path: "/withdraw/withdrawPage",
      },
      {
        img: require("@/assets/image/home/custom.png"),
        title: this.$t("在线客服"),
        path: "/customerSelect",
      },
      {
        img: require("@/assets/image/home/auth.png"),
        title: this.$t("公证认证"),
        path: "/certificationCenter",
      },
      {
        img: require("@/assets/image/home/Exchange.png"),
        title: this.$t("闪兑"),
        path: "/exchange/exchangePage",
      },
      {
        img: require("@/assets/image/home/record.png"),
        title: this.$t("账变记录"),
        path: "/accountChange",
      },
      {
        img: require("@/assets/image/home/language.png"),
        title: this.$t("语言切换"),
        path: "/language",
      },
      {
        img: require("@/assets/image/home/Send.png"),
        title: this.$t("邀请返佣"),
        path: "/promote",
      },
    ];
    this.getNews();
    this.getPopupNews();
    await this.SET_COIN_LIST();
    this.startTimeout();
    if (this.userInfo.token) {
      this.getAssets();
      this.fetchUnread();
      this.unreadMsg_timer = setInterval(() => {
        this.fetchUnread();
      }, 5000);
    } else {
      this.unreadMsg_num = "";
    }
  },
  deactivated() {
    this.clearTimeout();
    if (this.unreadMsg_timer) {
      clearInterval(this.unreadMsg_timer);
      this.unreadMsg_timer = null;
    }
  },
  beforeDestroy() {
    this.clearTimeout();
    if (this.unreadMsg_timer) {
      clearInterval(this.unreadMsg_timer);
      this.unreadMsg_timer = null;
    }
  },
};
</script>
<style lang="scss" scoped>
.user_box {
  box-sizing: border-box;
  height: 350px;
  align-items: center;
  padding: 45px 50px;
  background: linear-gradient(142deg, #fff0ba 0%, #ffaa00 91%);
  border-radius: 40px 40px 40px 40px;
  opacity: 1;
}
.count {
  width: 100%;
  overflow: auto;
  margin-bottom: 30px;
}
.top_logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rg_top {
  display: flex;
  img {
    width: 80px;
    height: 80px;
    margin-left: 30px;
  }
}
.port {
  display: flex;

  .demo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 300px;
    height: 220px;
    margin-right: 30px;
    flex-shrink: 0;
    line-height: 50px;
    border-radius: 29px 29px 29px 29px;
    border: 2px solid #f0f0f0;
    padding: 20px;
    .content {
      display: flex;
      justify-content: space-between;
      .lf {
        .name {
          color: #aaa;
          font-size: 20px;
        }
        .money {
          font-weight: 700;
        }
      }
    }
    .title {
      .lf {
        display: flex;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
      }
    }
  }
}
.function {
  margin: 30px 0;
  display: flex;
  justify-content: space-between;
  .item {
    box-sizing: border-box;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 15px;
    width: 30%;
    border-radius: 24px 24px 24px 24px;
    border: 2px solid #f0f0f0;

    img {
      width: 45px;
      height: 45px;
      margin-right: 10px;
    }
  }
}
.detail_u {
  display: flex;
  align-items: center;
}
.moneys {
  span {
    font-size: 56px;
    font-family: Manrope, Manrope;
    font-weight: 800;
    color: #000000;
  }
}
.home {
  width: 100%;
  box-sizing: border-box;
  //padding: 0 32px 108px;
  //background: $main_background;
}

.addBox {
  border-radius: 10px;
  width: 540px;
  height: 200px;
  font-size: 15px;
  background: $text_color;
  position: fixed;
  bottom: 70px;
  left: 50%;
  margin-left: -270px;
  z-index: 1000;

  .add {
    padding: 30px;
    box-sizing: border-box;
    height: 100%;
    position: relative;
    color: $main_background;

    .closeAdd {
      position: absolute;
      right: 10px;
      top: 10px;
    }

    .jiao {
      position: absolute;
      bottom: -76px;
      width: 0;
      height: 0;
      left: 240px;
      border: 30px solid transparent;
      border-top: 50px solid $text_color;
    }
  }
}

.up-to {
  border: 1px solid #1a1c20;
  border-radius: 8px;
}

.bottom {
  bottom: -70px;
}

.border-ra-20 {
  border-radius: 20px;
}

.border-ra-30 {
  border-radius: 30px;
}

.border-ra-30-2 {
  border-radius: 0 0 30px 30px;
}

.color-9F9 {
  color: #3e3d0f;
}

.home-text-black {
  color: #1a1c20;
}

.home-text-color {
  color: #eb7b13;
}

.home-top {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}
.line {
  margin: 34px auto 0;
}
.van-notice-bar {
  height: 60px;
}
.notice-swipe {
  height: 60px;
  line-height: 60px;
}
.one_top {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
}
.homeInfo {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
  .van-info {
    top: 14px;
    right: 14px;
  }
}
.three {
  display: flex;
  align-items: center;
  font-weight: 700;
  padding: 10px 30px;
  img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px 12px 12px 12px;
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>
